<template>
  <div class="box">
    <ul>
      <div class="has-number">
        <p>已有账号</p>
        <p @click="toLogin">立即登录 >></p>
      </div>
      <li
        v-for="(item, index) in registerRole"
        :key="index"
        :class="'li' + (index + 1)"
      >
        <div class="img">
          <el-image :src="item.imgUrl"></el-image>
          <div class="layer1" :style="{background: item.layer1BgColor}"></div>
          <div class="layer2" :style="{background: item.layer2BgColor}"></div>
        </div>
        <p class="_title">{{ item.title }}</p>
        <p class="_button" @click="toRegister(item)">立即免费注册</p>
      </li>
    </ul>
  </div>
</template>
<script>
import {registerRole} from './const.js'
export default {
  data() {
    return {
      registerRole,
    }
  },
  methods: {
    toLogin() {
      this.$router.push({
        path: '/login/index',
      })
    },
    // 免费注册
    toRegister(item) {
      this.$emit('toRegister', item)
    },
  },
}
</script>
<style lang="less" scoped>
.box {
  ul {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    background: #fff;
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    padding: 0;
    .has-number {
      position: absolute;
      right: 10px;
      top: 10px;
      display: flex;
      font-size: 12px;
      p:last-child {
        color: rgb(159, 194, 250);
        margin-left: 10px;
        cursor: pointer;
      }
    }
    li {
      .img {
        width: 200px;
        height: 200px;
        position: relative;
        .el-image {
          position: absolute;
          z-index: 3;
        }
        .layer1 {
          position: absolute;
          width: 200px;
          height: 200px;
          top: 0;
          left: 0;
          // background: red;
          border-radius: 50%;
          z-index: 1;
        }
        .layer2 {
          position: absolute;
          width: 160px;
          height: 160px;
          top: 20px;
          left: 20px;
          // background: pink;
          border-radius: 50%;
          z-index: 2;
        }
      }
      ._title {
        font-size: 20px;
        text-align: center;
        margin: 10px 0;
      }
      ._introduce {
        font-size: 12px;
        color: #aaa;
        text-align: center;
      }
      ._button {
        padding: 10px;
        width: 147px;
        height: 42px;
        color: #fff;
        text-align: center;
        margin: 0 auto;
        margin-top: 40px;
        cursor: pointer;
        border-radius: 4px;
      }
      &:hover {
        .layer1 {
          animation: layerMove1 1s 2;
        }

        @keyframes layerMove1 {
          0% {
            transform: scale(1, 1);
          }
          100% {
            transform: scale(1.2, 1.2);
          }
        }
        .layer2 {
          animation: layerMove2 1s 2;
        }

        @keyframes layerMove2 {
          0% {
            transform: scale(1, 1);
          }
          100% {
            transform: scale(1.2, 1.2);
          }
        }
      }
    }
    .li1 {
      ._button {
        background: rgb(77, 132, 255);
        &:hover {
          background: #5e90ff;
        }
      }
    }
    .li2 {
      ._button {
        background: rgb(43, 190, 179);
        &:hover {
          background: #41c4bb;
        }
      }
    }
    .li3 {
      ._button {
        background: rgb(243, 174, 105);
        &:hover {
          background: #f4b577;
        }
      }
    }
    .li4 {
      ._button {
        background: #7b8bff;
        &:hover {
          background: #8896ff;
        }
      }
    }
  }
}
</style>
